<template>
  <div class="relative overflow-hidden">
    <div class="main-bg"></div>
    <div class="flex flex-col w-full px-16px py-16px text-white relative z-9">
      <span class="text-20px font-bold leading-24px"
        >从零开始搭建一个游戏网站，如何用游戏网站盈利从零开始搭建一个游戏网站</span
      >
    </div>
    <div class="relative z-9 text-white px-16px pb-16px">
      <div class="flex flex-col">
        <div class="flex items-center pb-8px">
          <div class="flex items-center mx-10px">
            <div class="w-5px h-5px rounded-1/2 bg-white mr-8px"></div>
            <span class="mr-10px text-12px">化工产业链</span>
          </div>
          <div class="flex items-center mx-10px">
            <div class="w-5px h-5px rounded-1/2 bg-white mr-8px"></div>
            <span class="mr-10px text-12px">化工产业链</span>
          </div>
        </div>
        <div class="flex items-center">
          <div class="flex items-center mr-10px">
            <el-avatar
              size="small"
              src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
              class="mr-5px"
            />
            <span class="text-16px">kaifazhe</span>
          </div>
          <div class="mx-10px flex items-center">
            <el-icon>
              <Clock />
            </el-icon>
            <span class="text-14px ml-5px mr-10px">2个月前</span>
          </div>
          <div class="mx-10px flex items-center">
            <el-icon>
              <View />
            </el-icon>
            <span class="text-14px ml-5px mr-10px">586</span>
          </div>
        </div>
        <div class="flex flex-col mt-8px">
          <div class="flex flex-col flex-center px-16px py-8px bg-primary text-white rounded-4px">
            <span class="text-16px mb-4px">招标中，已投(5/10)</span>
            <span class="text-16px"> 立即询价</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="px-16px py-16px bg-grayscaleBg">
    <div class="w-full py-8px px-16px bg-white rounded-16px">
      <div class="flex items-center">
        <em />
        <span class="font-bold text-16px">订单详情</span>
      </div>
      <div class="mt-16px">订单详情</div>
    </div>
    <div class="w-full py-8px px-16px bg-white rounded-16px mt-16px">
      <div class="flex items-center pb-16px">
        <em />
        <span class="font-bold text-16px">推荐订单</span>
      </div>
      <Menu :menuIndex="0" />
      <Menu :menuIndex="1" />
      <Menu :menuIndex="2" />
      <Menu :menuIndex="3" />
      <Menu :menuIndex="4" />
    </div>
    <div class="w-full py-8px px-16px bg-white rounded-16px mt-16px">
      <div class="flex items-center pb-16px">
        <em />
        <span class="font-bold text-16px">相关订单</span>
      </div>
      <Menu :menuIndex="0" />
      <Menu :menuIndex="1" />
      <Menu :menuIndex="2" />
      <Menu :menuIndex="3" />
      <Menu :menuIndex="4" />
    </div>
  </div>
</template>

<script setup>
import Menu from './components/leftDetail.vue'
</script>

<style lang="scss" scoped>
.main-bg {
  position: absolute;
  background-image: url(@/assets/image/communication2.jpg);
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  z-index: 0;
  &::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0.95;
    background: linear-gradient(to right, #1e2125, #323a46);
  }
}

em {
  height: 20px;
}
</style>
